<template>
  <div>
    <e-upload
      :show-upload-list="false"
      :on-success="handleSuccess"
      :on-exceeded-size="handleMaxSize"
      :on-format-error="handleFormatError"
      :before-upload="handleBeforeUpload"
      :default-file-list="defaultList"
      :on-error="onError"
      :on-progress="onProgress"
      :on-preview="onPreview"
      :onCloseSelectFileWindow="onCloseSelectFileWindow"
      ref="upload"
      multiple
      :data="{'a':1}"
      withCredentials
      :format="['jpg', 'jpeg', 'png']"
      :max-size="2048"
      type="drag"
      action="//jsonplaceholder.typicode.com/posts/"
      class="demo-upload-button"
    >
      <div class="inner" @click="isActive = true" :class="{ 'is-active': isActive }">
        <e-icon size="17" type="add"></e-icon>
        上传
      </div>
      <!-- <template v-slot:tip>
        <div>
          支持扩展名: .jpeg .jpg .png
        </div>
      </template> -->
    </e-upload>
    <div
      class="demo-upload-list"
      v-for="(item, index) in uploadList"
      :key="index"
    >
      <template v-if="item.status === 'finished'">
        <e-image :src="item.url" fit="cover" width="100%" height="100%" />
        <div class="demo-upload-list-cover">
          <e-icon type="display" size="20" @click="handleView(item)" class="close-round-icon">

          </e-icon>
          <e-icon
            class="close-round-icon"
            type="delete"
            size="20"
            @click.enter="handleRemove(item)"
          >
          </e-icon>
        </div>
      </template>
      <template v-else>
        <div class="uploading">
          <div>{{ handleStatus(item) }}</div>
          <e-progress
            style="width: 70%; margin: 0 auto"
            :stroke-width="7"
            v-if="item.showProgress"
            :percent="item.percentage"
            :status="handleStatus(item)"
            hide-info
          ></e-progress>
        </div>
        <e-icon
          class="close-round-fail"
          type="close"
          size="14"
          @click.enter="handleRemove(item)"
        >
        </e-icon>
      </template>
    </div>
    <e-image-preview
      v-model="visible"
      :preview-list="[`https://picsum.photos/id/${imageId}/800`]"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, computed } from 'vue'
const visible = ref(false)
let uploadList = ref([])
let currentInstance = ''
let imageId=ref();

let defaultList = ref([
  {
    name: '71',
    url: 'https://picsum.photos/id/71/800',
  },
  {
    name: '72',
    url: 'https://picsum.photos/id/72/800',
  },
  {
    name: '73',
    url: 'https://picsum.photos/id/73/800',
  }
])

const isActive = ref(false)

const bg=computed(() => {
  return [
    'bg'
  ]
})

const styles=ref();

onMounted(() => {
  currentInstance = getCurrentInstance()
  uploadList.value = currentInstance.ctx.$refs.upload.fileList
})

let statusText = ref()

const handleStatus = (item) => {
  if (item.status === 'uploading') {
    statusText.value = '上传中...'
    return 'normal'
  }
  if (item.status === 'fail') {
    statusText.value = '上传失败'
    return 'wrong'
  }
}

const onCloseSelectFileWindow = () => {
  console.log(1111)
  isActive.value = false
}

const handleView=(item)=>{
  imageId.value=item.name
  visible.value = true;
}

const onPreview=(file)=>{
  console.log('onpreview',file)
}

const handleRemove = (index) => {
  uploadList.value.splice(uploadList.value.indexOf(index), 1)
  // uploadList.value.splice(index, 1);
}
const handleSuccess = (res, file) => {
  file.url = 'https://picsum.photos/id/74/800'
  file.name = '74'
}
const handleMaxSize = (file) => {
  currentInstance.proxy.$Message.warning({
    content: `File${file.name}' is too large, no more than 2M.`,
    duration: 1.5,
  })
}
const handleFormatError = (file) => {
  currentInstance.proxy.$Message.warning({
    content: `File format of ${file.name}is incorrect, please select jpg or png.`,
    duration: 1.5,
  })
}
const handleBeforeUpload = () => {
  const check = uploadList.value.length < 5
  if (!check) {
    currentInstance.proxy.$Message.warning({
      content: 'Up to five pictures can be uploaded.',
      duration: 1.5,
    })
  }
  return check
}

const onError = (err, file,fileList) => {
  styles.value=`
    background:url(${'https://picsum.photos/id/73/800'});
    background-size:contain;
  `
  console.log('onError', err, file,fileList)
}

const onProgress=(e,file,fileList)=>{
  console.log("progress",e,file,fileList)
}
</script>

<style scoped lang="less">

.bg{
  background: url('https://picsum.photos/id/71/800');
}
.demo-upload-button {
  display: inline-block;
  width: 100px;
  height: 100px;
  .inner {
    display: flex;
    height: 100px;
    justify-content: center;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.02);
    // background: url('https://picsum.photos/id/71/800');
    background-size: contain;
    & > p {
      color: #555555;
    }
  }
}
.demo-upload-list {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  margin-left: 20px;
  overflow: hidden;
  background: #fff;
  position: relative;
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.close-round-icon {
  position: absolute;
  // top: 5px;
  // right: 5px;
  top: 50%;
  transform: translate(-50%,-50%);
  left: 50%;
  color: #999999;
  cursor: pointer;
}

.close-round-fail{
  position: absolute;
  top: 5px;
  right: 5px;
  color: #999999;
  cursor: pointer;
}
.uploading {
  display: flex;
  height: 100px;
  color: #999999;
  justify-content: center;
  flex-direction: column;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
  cursor: pointer;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 -15px;
  padding: 0 10px;
}
.demo-upload-list-cover i +i {
  // color: #fff;
  // font-size: 20px;
  // cursor: pointer;
  // margin: 0 2px;
  margin: 0 15px;
}

:deep(.haloe-upload) {
  color: #555555;

  .is-active {
    background-color: #E8F0FF;
  }

  .haloe-upload-hover-border-color {
    &:hover {
      .inner {
        color: #1A6AFF;
      }
    }
  }
}
</style>
